<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>配置实体</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
</head>
<style>
    .layui-btn-disabled, .layui-btn-disabled:active, .layui-btn-disabled:hover {
        border: 1px solid #e6e6e6 !important;
        background-color: #FBFBFB !important;
        color: #C9C9C9 !important;
        cursor: not-allowed !important;
        opacity: 1 !important;
    }
</style>
<body>
<div class="page-content-wrap clearfix">
    <form class="layui-form" id="tool">
        <div class="layui-tab">
            <div class="layui-tab-content">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>实体</legend>
                </fieldset>
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="tableName" lay-verify="required" placeholder="请输入名称" value="<#if (formTableVo.tableName != '')>${formTableVo.tableName}</#if>" autocomplete="off"
                                   class="layui-input" maxlength="64">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;注释：</label>
                        <div class="layui-input-block">
                            <textarea class="layui-textarea" name="tableComment" lay-verify="required" autocomplete="off" placeholder="请输入注释"
                                      maxlength="2000"><#if (formTableVo.tableComment != '')>${formTableVo.tableComment}</#if></textarea>
                        </div>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>实体属性</legend>
                </fieldset>
                <div class="layui-tab-item layui-show" id="tableField">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;名称：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="field_0" lay-verify="required" value="id" class="layui-input" readonly>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;类型：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="dataType_0" lay-verify="required" value="varchar" class="layui-input" readonly>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;长度：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="dataLength_0" lay-verify="required" value="36" class="layui-input" readonly>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;注释：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="comment_0" lay-verify="required" value="主键ID" class="layui-input" readonly>
                        </div>
                    </div>
                    <#list formTableVo.formTableFieldVoList as formTableFieldVo>
                    <#if formTableFieldVo.field != 'id'>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;名称：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="field_${formTableFieldVo_index}" lay-verify="required" placeholder="请输入名称" value="${formTableFieldVo.field}" class="layui-input"  autocomplete="off">
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;类型：</label>
                        <div class="layui-input-inline w200">
                            <select name="dataType_${formTableFieldVo_index}" lay-filter="dataType">
                                <option value="" <#if (formTableFieldVo.dataType == '')>selected</#if>>请选择</option>
                                <option value="varchar" <#if (formTableFieldVo.dataType == 'varchar')>selected</#if>>varchar</option>
                                <option value="char" <#if (formTableFieldVo.dataType == 'char')>selected</#if>>char</option>
                                <option value="int" <#if (formTableFieldVo.dataType == 'int')>selected</#if>>int</option>
                                <option value="double" <#if (formTableFieldVo.dataType == 'double')>selected</#if>>double</option>
                                <option value="datetime" <#if (formTableFieldVo.dataType == 'datetime')>selected</#if>>datetime</option>
                                <option value="date" <#if (formTableFieldVo.dataType == 'date')>selected</#if>>date</option>
                                <option value="text" <#if (formTableFieldVo.dataType == 'text')>selected</#if>>text</option>
                            </select>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;长度：</label>
                        <div class="layui-input-inline w200">
                            <#if formTableFieldVo.dataLength == null || formTableFieldVo.dataLength == ''>
                            <input type="text" name="dataLength_${formTableFieldVo_index}" lay-verify="required|number" placeholder="请输入长度" value="0" class="layui-input"  autocomplete="off">
                            <#else>
                            <input type="text" name="dataLength_${formTableFieldVo_index}" lay-verify="required|number" placeholder="请输入长度" value="${formTableFieldVo.dataLength}" class="layui-input"  autocomplete="off">
                            </#if>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>&nbsp;注释：</label>
                        <div class="layui-input-inline w200">
                            <input type="text" name="comment_${formTableFieldVo_index}" lay-verify="required" placeholder="请输入注释" value="${formTableFieldVo.comment}" class="layui-input" autocomplete="off">
                        </div>
                        <button class="layui-btn layui-btn-normal layui-btn-danger" type="button" onclick="deleteField(this)">删除</button>
                        <#if formTableFieldVo_index == 1>
                        <button class="layui-btn layui-btn-normal layui-btn-disabled" type="button" onclick="moveUp(this)">上移</button>
                        <#else>
                        <button class="layui-btn layui-btn-normal" type="button" onclick="moveUp(this)">上移</button>
                        </#if>
                        <#if formTableFieldVo_index == (formTableVo.formTableFieldVoList?size-1)>
                        <button class="layui-btn layui-btn-normal layui-btn-disabled" type="button" onclick="moveDown(this)">下移</button>
                        <#else>
                        <button class="layui-btn layui-btn-normal" type="button" onclick="moveDown(this)">下移</button>
                        </#if>
                    </div>
                    </#if>
                    </#list>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 0px !important;text-align: center">
                            <button class="layui-btn layui-btn-normal" type="button" onclick="addField(this)">添加属性</button>
                            <button class="layui-btn layui-btn-normal" type="button" onclick="selectField(this)">可选属性</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px !important;text-align: center">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">下一步</button>
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
                <button class="layui-btn layui-btn-primary" type="button" id="cancel">取消</button>
            </div>
        </div>
    </form>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    var form = null;
    var dialog = null;
    layui.use(['form', 'jquery', 'dialog', 'baseutil'], function () {
        var $ = layui.jquery,
            baseutil = layui.baseutil;
        form = layui.form;
        dialog = layui.dialog;

        //下拉框
        form.on('select(dataType)', function (data) {
            if (data.value === 'datetime' || data.value === 'date' || data.value === 'text') {
                this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '0';
                this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].setAttribute('readonly', 'readonly');
            } else {
                this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].removeAttribute('readonly', 'readonly');
                if (data.value === 'varchar') {
                    this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '36';
                } else if (data.value === 'char') {
                    this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '1';
                } else if (data.value === 'int') {
                    this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '11';
                } else if (data.value === 'double') {
                    this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '9,2';
                }else {
                    this.parentNode.parentNode.parentNode.parentNode.children[5].children[0].value = '';
                }
            }
        });

        //保存
        form.on('submit(saveBtn)', function (data) {
            var param = getSubmitData(data);
            baseutil.post('/gen/form/createTable', param, function (result) {
                dialog.msg(result.msg);
            });
            return false;
        });

        //下一步
        form.on('submit(submitBtn)', function (data) {
            var param = getSubmitData(data);
            baseutil.AjaxPostMark('/gen/form/createTable', param, function () {
                parent.tabChange('formPageEdit', '/gen/form/getFormPageEdit?tableName=' + data.field.tableName, '配置表格', 'formTableEdit');
            });
            return false;
        });

        //取消
        $('#cancel').bind('click', function () {
            parent.tabDelete('formTableEdit');
        });

        function getSubmitData(data) {
            var formTableVo = {tableName: data.field.tableName, tableComment: data.field.tableComment};
            var formTableFieldVoList = [];
            var length = $('#tableField')[0].children.length - 1;
            for (var i = 0; i < length; i++) {
                var formTableFieldVo = {};
                formTableFieldVo.field = data.field['field_' + i];
                formTableFieldVo.dataType = data.field['dataType_' + i];
                formTableFieldVo.dataLength = data.field['dataLength_' + i];
                formTableFieldVo.comment = data.field['comment_' + i];
                formTableFieldVoList.push(formTableFieldVo);
            }
            formTableVo.formTableFieldVos = JSON.stringify(formTableFieldVoList);
            return formTableVo
        }
    });

    //选择属性
    function selectField(obj) {
        var oldFields = [];
        var length = $('#tableField')[0].children.length - 1;
        for (var i = 1; i < length; i++) {
            var item = $('#tableField')[0].children[i];
            var oldField = item.children[1].children[0].attributes['value'].nodeValue;
            if (oldField === 'valid_state' || oldField === 'remove_tag' || oldField === 'create_user'
                || oldField === 'create_time' || oldField === 'update_user' || oldField === 'update_time') {
                oldFields.push(oldField);
            }
        }
        dialog.popUpPage('选择属性', '/gen/form/getFieldSelector?field=' + oldFields.join(","), '380px', '560px', function (layer, index) {
            var body = layer.getChildFrame('body', index);
            body.find("#save").bind("click", function () {
                parent.layer.close(index);
                var selectedField = body.find("#selectedField").val();
                var unSelectedField = body.find("#unSelectedField").val();
                if (isBlank(selectedField)) {
                    checkUnSelectedField(unSelectedField);
                } else {
                    var fields = selectedField.split(",");
                    for (var i = 0; i < fields.length; i++) {
                        if (oldFields.join(",").indexOf(fields[i]) === -1) {
                            addField(obj, fields[i]);
                        }
                    }
                    checkUnSelectedField(unSelectedField);
                }
            });
            body.find("#cancel").bind("click", function () {
                parent.layer.close(index);
            });
        });
        return false;
    }

    function checkUnSelectedField(unSelectedField) {
        var length = $('#tableField')[0].children.length - 1;
        for (var i = 1; i < length; i++) {
            var item = $('#tableField')[0].children[i];
            var field = $('input[name=field_' + i + ']').val();
            if (!isBlank(field) && unSelectedField.indexOf(field) > -1) {
                deleteField(item.children[1]);
                i--;
            }
        }
    }

    //添加属性
    function addField(obj, field) {
        var index = obj.parentNode.parentNode.parentNode.children.length - 1;
        var str = '';
        str += '<div class="layui-form-item">';
        str += '<label class="layui-form-label"><span class="red">*</span>&nbsp;名称：</label>';
        str += '<div class="layui-input-inline w200">';
        if (isBlank(field)) {
            str += '<input type="text" name="field_' + index + '" lay-verify="required" placeholder="请输入名称" value="" class="layui-input" autocomplete="off">';
        } else {
            str += '<input type="text" name="field_' + index + '" lay-verify="required" placeholder="请输入名称" value="' + field + '" class="layui-input" autocomplete="off">';
        }
        str += '</div>';
        str += '<label class="layui-form-label"><span class="red">*</span>&nbsp;类型：</label>';
        str += '<div class="layui-input-inline w200">';
        str += '<select name="dataType_' + index + '" lay-filter="dataType" lay-verify="required">';
        str += '<option value="">请选择</option>';
        if (isBlank(field)) {
            str += '<option value="varchar">varchar</option>';
            str += '<option value="char">char</option>';
            str += '<option value="int">int</option>';
            str += '<option value="double">double</option>';
            str += '<option value="datetime">datetime</option>';
            str += '<option value="date">date</option>';
            str += '<option value="text">text</option>';
        } else {
            if (field === 'create_user' || field === 'update_user') {
                str += '<option value="varchar" selected>varchar</option>';
            } else {
                str += '<option value="varchar">varchar</option>';
            }
            if (field === 'valid_state' || field === 'remove_tag') {
                str += '<option value="char" selected>char</option>';
            } else {
                str += '<option value="char">char</option>';
            }
            str += '<option value="int">int</option>';
            str += '<option value="double">double</option>';
            if (field === 'create_time' || field === 'update_time') {
                str += '<option value="datetime" selected>datetime</option>';
            } else {
                str += '<option value="datetime">datetime</option>';
            }
            str += '<option value="date">date</option>';
            str += '<option value="text">text</option>';
        }
        str += '</select>';
        str += '</div>';
        str += '<label class="layui-form-label"><span class="red">*</span>&nbsp;长度：</label>';
        str += '<div class="layui-input-inline w200">';
        if (isBlank(field)) {
            str += '<input type="text" name="dataLength_' + index + '" lay-verify="required|number" placeholder="请输入长度" value="" class="layui-input" autocomplete="off">';
        } else {
            if (field === 'valid_state' || field === 'remove_tag') {
                str += '<input type="text" name="dataLength_' + index + '" lay-verify="required|number" placeholder="请输入长度" value="1" class="layui-input" autocomplete="off">';
            } else if (field === 'create_user' || field === 'update_user') {
                str += '<input type="text" name="dataLength_' + index + '" lay-verify="required|number" placeholder="请输入长度" value="36" class="layui-input" autocomplete="off">';
            } else if (field === 'create_time' || field === 'update_time') {
                str += '<input type="text" name="dataLength_' + index + '" lay-verify="required|number" placeholder="请输入长度" value="0" class="layui-input" autocomplete="off">';
            }
        }
        str += '</div>';
        str += '<label class="layui-form-label"><span class="red">*</span>&nbsp;注释：</label>';
        str += '<div class="layui-input-inline w200">';
        if (isBlank(field)) {
            str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="" class="layui-input" autocomplete="off">';
        } else {
            if (field === 'valid_state') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="是否有效：1-无效；2-有效" class="layui-input" autocomplete="off">';
            } else if (field === 'remove_tag') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="是否删除：1-未删除；2-已删除" class="layui-input" autocomplete="off">';
            } else if (field === 'create_user') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="创建人" class="layui-input" autocomplete="off">';
            } else if (field === 'create_time') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="创建时间" class="layui-input" autocomplete="off">';
            } else if (field === 'update_user') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="更新人" class="layui-input" autocomplete="off">';
            } else if (field === 'update_time') {
                str += '<input type="text" name="comment_' + index + '" lay-verify="required" placeholder="请输入注释" value="更新时间" class="layui-input" autocomplete="off">';
            }
        }
        str += '</div>';
        str += '<button class="layui-btn layui-btn-normal layui-btn-danger" type="button" onclick="deleteField(this)">删除</button>';
        if (index === 1) {
            str += '<button class="layui-btn layui-btn-normal layui-btn-disabled" style="margin-left: 9px !important;" type="button" onclick="moveUp(this)">上移</button>';
            str += '<button class="layui-btn layui-btn-normal layui-btn-disabled" style="margin-left: 9px !important;" type="button" onclick="moveDown(this)">下移</button>';
        } else {
            $(obj.parentNode.parentNode.parentNode.children[index - 1].children[10]).removeClass("layui-btn-disabled");
            str += '<button class="layui-btn layui-btn-normal" style="margin-left: 9px !important;" type="button" onclick="moveUp(this)">上移</button>';
            str += '<button class="layui-btn layui-btn-normal layui-btn-disabled" style="margin-left: 9px !important;" type="button" onclick="moveDown(this)">下移</button>';
        }
        str += '</div>';
        $(obj.parentNode.parentNode).before(str);
        form.render('select');
    }

    //删除属性
    function deleteField(obj) {
        obj.parentNode.remove();
        reloadDiv();
    }

    //上移
    function moveUp(obj) {
        if (!$(obj).hasClass("layui-btn-disabled")) {
            var index = $(obj.parentNode).index();
            var divs = $($('#tableField')[0].children).toArray();
            var temp = divs[index - 1];
            divs[index - 1] = divs[index];
            divs[index] = temp;
            $('#tableField').html(divs);
            reloadDiv();
        }
    }

    //下移
    function moveDown(obj) {
        if (!$(obj).hasClass("layui-btn-disabled")) {
            var index = $(obj.parentNode).index();
            var divs = $($('#tableField')[0].children).toArray();
            var temp = divs[index + 1];
            divs[index + 1] = divs[index];
            divs[index] = temp;
            $('#tableField').html(divs);
            reloadDiv();
        }
    }

    function reloadDiv() {
        var length = $('#tableField')[0].children.length - 1;
        for (var i = 1; i < length; i++) {
            var item = $('#tableField')[0].children[i];
            item.children[1].children[0].attributes['name'].nodeValue = ('field_' + i);
            item.children[3].children[0].attributes['name'].nodeValue = ('dataType_' + i);
            item.children[5].children[0].attributes['name'].nodeValue = ('dataLength_' + i);
            item.children[7].children[0].attributes['name'].nodeValue = ('comment_' + i);
            if (i === 1) {
                $(item.children[9]).addClass("layui-btn-disabled");
            } else {
                $(item.children[9]).removeClass("layui-btn-disabled");
            }
            if (i === length - 1) {
                $(item.children[10]).addClass("layui-btn-disabled");
            } else {
                $(item.children[10]).removeClass("layui-btn-disabled");
            }
        }
        form.render('select');
    }
</script>
</body>
</html>